<template>
  <div class="CountMange">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch="true">
      <el-tab-pane label="医疗账单明细" name="first">
        <template #label><span class="my-label">医疗账单明细</span></template>
        <div>
          <Card></Card>

          <el-date-picker v-model="value2" type="datetimerange" start-placeholder="起始时间" end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" unlink-panels='true'
            @change="changeTime" />
          <!-- 暂未定搜索函数 -->
          <el-button type="primary" round>搜索</el-button>

          <el-card style="max-width: 100% " body-style="background-color: #eee;">
            <h2 style="text-align:center">老年医养照护中心</h2>
          </el-card>
          <el-card style="max-width: 100% " body-style="background-color: #eee;">
            <p style="text-align:center; font-size:18px">医疗消费明细</p>
          </el-card>

          <table border="1px solid #ccc">
            <tr>
              <td>入住号:{{ 121212121 }}</td>
              <td>姓名:{{ 11 }}</td>
              <td>性别:{{ '女' }}</td>
              <td>照护等级:{{ '四级照护' }}</td>
              <td>床位:{{ '21床' }}</td>
            </tr>
            <tr>
              <td colspan="2">家属姓名:{{ 'xxx' }}</td>
              <td colspan="2">家属性别:{{ '女' }}</td>
              <td>联系电话:{{ 13333333333 }}</td>
            </tr>
            <tr>
              <td>
                消费日期:{{ '2022-12-01至2023-02-12' }}
              </td>
            </tr>
            <tr>
              <td colspan="3" style="color:red">医疗保障金总支出:{{ 21032 }}元,其中特殊护理支出:{{ 299 }}元</td>
              <td colspan="2" style="color:red">医保总支出:{{ 562 }}元,其中特殊护理支出:{{ 199 }}元</td>
            </tr>
            <tr>
              <td colspan="4">医疗支出总金额</td>
              <td colspan="4" style="color:red">{{ 232 }}元</td>
            </tr>
          </table>

          <div style="display:flex; justify-content:space-around">
            <h4>医疗保障金支出</h4>
            <span></span><span></span>
            <p style="padding: 0px 30px">{{ 222 }}元</p>
          </div>

          <vxe-table border ref="xTable" align="center" :data="tableData">
            <vxe-column field="name" title="时间"></vxe-column>
            <vxe-column field="role" title="项目"></vxe-column>
            <vxe-column field="sex" title="金额"></vxe-column>
            <vxe-column field="age" title="备注"></vxe-column>

          </vxe-table>

          <div style="display:flex; justify-content:space-around">
            <h4>医保支出</h4>
            <span></span><span></span>
            <p style="padding: 0px 30px">{{ 222 }}元</p>
          </div>

          <vxe-table border ref="xTable" align="center" :data="tableData">
            <vxe-column field="name" title="时间"></vxe-column>
            <vxe-column field="role" title="项目"></vxe-column>
            <vxe-column field="sex" title="金额"></vxe-column>

          </vxe-table>

          <div style="display:flex; justify-content:space-around">
            <h4>明细查询时间:{{ 'date' }}</h4>
            <span></span><span></span>
            <p style="padding: 0px 30px">操作人:{{ 'name' }}</p>
          </div>

        </div>
      </el-tab-pane>

      <el-tab-pane label="养老账单明细" name="second">
        <template #label><span class="my-label">养老账单明细</span></template>
        <Card></Card>
        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD" time-format="HH:mm" @change="changeTime1" />

        <!-- 暂未定搜索函数 -->
        <el-button type="primary" round>搜索</el-button>

        <el-card style="width: 100%; " body-style="width: 100%;background-color: #eee;">
          <h2 style="text-align:center">老年医养照护中心</h2>
          <el-button type="primary" style="position:relative; left: 1000px; bottom:30px" round>生成账单</el-button>
        </el-card>
        <el-card style="max-width: 100% " body-style="background-color: #eee;">
          <p style="text-align:center; font-size:18px">养老账单明细</p>
        </el-card>

        <table border="1px solid #ccc">
          <tr>
            <td>入住号:{{ 121212121 }}</td>
            <td>姓名:{{ 11 }}</td>
            <td>性别:{{ '女' }}</td>
            <td>照护等级:{{ '四级照护' }}</td>
            <td>床位:{{ '21床' }}</td>
          </tr>
          <tr>
            <td colspan="2">家属姓名:{{ 'xxx' }}</td>
            <td colspan="2">家属性别:{{ '女' }}</td>
            <td>联系电话:{{ 13333333333 }}</td>
          </tr>
          <tr>
            <td colspan="5">
              结算日期:{{ '2022-12-01至2022-12-31' }}
            </td>
          </tr>
          <tr>
            <td style="color:red">上月退补:{{ 0 }}元</td>
            <td style="color:red">养老支出:{{ 7006 }}元</td>
            <td style="color:red">本月应收:{{ 7006 }}元</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left; font-weight:700">上月退补</td>
            <td style="color:red">{{ 0 }}元</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left">养老支出</td>
            <td style="color:red">{{ 7006 }}元</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left; font-weight:700">固定费用支出</td>
            <td style="color:red">{{ 7006 }}元</td>
          </tr>
        </table>

        <vxe-table border ref="xTable" align="center" :data="tableData">
          <!-- tableData需要更替新的 -->
          <vxe-column field="name" title="时间"></vxe-column>
          <vxe-column field="role" title="说明"></vxe-column>
          <vxe-column field="sex" title="金额"></vxe-column>

        </vxe-table>
        <div style="display:flex; justify-content:space-between">
          <h4>日常费用支出</h4>
          <p style="padding: 0px 30px">{{ 7006 }}元</p>
        </div>
        <vxe-table border ref="xTable" align="center">
          <!-- :data需要加入 -->
          <vxe-column field="name" title="时间"></vxe-column>
          <vxe-column field="role" title="说明"></vxe-column>
          <vxe-column field="sex" title="金额"></vxe-column>
        </vxe-table>

      </el-tab-pane>
      <el-tab-pane label="居家账单明细" name="third">
        <template #label><span class="my-label">居家账单明细</span></template>
        <Card></Card>

        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD" time-format="HH:mm" @change="changeTime1" />

        <!-- 暂未定搜索函数 -->
        <el-button type="primary" round>搜索</el-button>

        <el-card style="width: 100%; " body-style="width: 100%;background-color: #eee;">
          <h2 style="text-align:center">老年医养照护中心</h2>
          <el-button type="primary" style="position:relative; left: 1000px; bottom:30px" round>生成账单</el-button>
        </el-card>
        <el-card style="max-width: 100% " body-style="background-color: #eee;">
          <p style="text-align:center; font-size:18px">居家账单明细</p>
        </el-card>

        <table border="1px solid #ccc">
          <tr>
            <td>入住号:{{ 121212121 }}</td>
            <td>姓名:{{ 11 }}</td>
            <td>性别:{{ '女' }}</td>
            <td>照护等级:{{ '四级照护' }}</td>
            <td>床位:{{ '21床' }}</td>
          </tr>
          <tr>
            <td colspan="2">家属姓名:{{ 'xxx' }}</td>
            <td colspan="2">家属性别:{{ '女' }}</td>
            <td>联系电话:{{ 13333333333 }}</td>
          </tr>
          <tr>
            <td colspan="5">
              结算日期:{{ '2022-12-01至2022-12-31' }}
            </td>
          </tr>
          <tr>
            <td style="color:red">上月退补:{{ 0 }}元</td>
            <td style="color:red">养老支出:{{ 7006 }}元</td>
            <td style="color:red">本月应收:{{ 7006 }}元</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left; font-weight:700">上月退补</td>
            <td style="color:red">{{ 0 }}元</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left">养老支出</td>
            <td style="color:red">{{ 7006 }}元</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left; font-weight:700">固定费用支出</td>
            <td style="color:red">{{ 7006 }}元</td>
          </tr>
        </table>

        <vxe-table border ref="xTable" align="center" :data="tableData">
          <!-- tableData需要更替新的 -->
          <vxe-column field="name" title="时间"></vxe-column>
          <vxe-column field="role" title="说明"></vxe-column>
          <vxe-column field="sex" title="金额"></vxe-column>

        </vxe-table>
        <div style="display:flex; justify-content:space-between">
          <h4>日常费用支出</h4>
          <p style="padding: 0px 30px">{{ 7006 }}元</p>
        </div>
        <vxe-table border ref="xTable" align="center">
          <!-- :data需要加入 -->
          <vxe-column field="name" title="时间"></vxe-column>
          <vxe-column field="role" title="说明"></vxe-column>
          <vxe-column field="sex" title="金额"></vxe-column>
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="居家医疗账单明细" name="fourth">
        <template #label><span class="my-label">居家医疗账单明细</span></template>
        <Card></Card>

        <el-date-picker v-model="value2" type="datetimerange" start-placeholder="起始时间" end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" unlink-panels='true'
          @change="changeTime" />
        <!-- 暂未定搜索函数 -->
        <el-button type="primary" round>搜索</el-button>

        <el-card style="max-width: 100% " body-style="background-color: #eee;">
          <h2 style="text-align:center">老年医养照护中心</h2>
        </el-card>
        <el-card style="max-width: 100% " body-style="background-color: #eee;">
          <p style="text-align:center; font-size:18px">医疗消费明细</p>
        </el-card>

        <table border="1px solid #ccc">
          <tr>
            <td>入住号:{{ 121212121 }}</td>
            <td>姓名:{{ 11 }}</td>
            <td>性别:{{ '女' }}</td>
            <td>照护等级:{{ '四级照护' }}</td>
            <td>床位:{{ '21床' }}</td>
          </tr>
          <tr>
            <td colspan="2">家属姓名:{{ 'xxx' }}</td>
            <td colspan="2">家属性别:{{ '女' }}</td>
            <td>联系电话:{{ 13333333333 }}</td>
          </tr>
          <tr>
            <td>
              消费日期:{{ '2022-12-01至2023-02-12' }}
            </td>
          </tr>
          <tr>
            <td colspan="3" style="color:red">医疗保障金总支出:{{ 21032 }}元,其中特殊护理支出:{{ 299 }}元</td>
            <td colspan="2" style="color:red">医保总支出:{{ 562 }}元,其中特殊护理支出:{{ 199 }}元</td>
          </tr>
          <tr>
            <td colspan="4">医疗支出总金额</td>
            <td colspan="4" style="color:red">{{ 232 }}元</td>
          </tr>
        </table>

        <div style="display:flex; justify-content:space-around">
          <h4>医疗保障金支出</h4>
          <span></span><span></span>
          <p style="padding: 0px 30px">{{ 222 }}元</p>
        </div>

        <vxe-table border ref="xTable" align="center" :data="tableData">
          <vxe-column field="name" title="时间"></vxe-column>
          <vxe-column field="role" title="项目"></vxe-column>
          <vxe-column field="sex" title="金额"></vxe-column>
          <vxe-column field="age" title="备注"></vxe-column>

        </vxe-table>

        <div style="display:flex; justify-content:space-around">
          <h4>医保支出</h4>
          <span></span><span></span>
          <p style="padding: 0px 30px">{{ 222 }}元</p>
        </div>

        <vxe-table border ref="xTable" align="center" :data="tableData">
          <vxe-column field="name" title="时间"></vxe-column>
          <vxe-column field="role" title="项目"></vxe-column>
          <vxe-column field="sex" title="金额"></vxe-column>

        </vxe-table>

        <div style="display:flex; justify-content:space-around">
          <h4>明细查询时间:{{ 'date' }}</h4>
          <span></span><span></span>
          <p style="padding: 0px 30px">操作人:{{ 'name' }}</p>
        </div>

        <el-button plain @click="dialogFormVisible = true">
          冲销账单
        </el-button>

        <el-dialog v-model="dialogFormVisible" title="冲销" width="500">
          <el-form :model="form">
            <el-form-item label="冲销金额" :label-width="formLabelWidth">
              <el-input v-model="form.money" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                立即冲销
              </el-button>
            </div>
          </template>
        </el-dialog>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  
  
<script setup>
import { ref, reactive } from 'vue'
import Card from './Card.vue'

//变量
const activeName = ref('first')
const value1 = ref('')
const value2 = ref('')
const tableData = ref([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
])
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  money: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

//函数
//切换标签
const handleClick = (tab, event) => {
  console.log(tab, event)
}
//切换医疗账单明细起始结束时间展示
let changeTime = (value) => {
  console.log(value);
}
//切换养老账单明细起始结束时间展示
let changeTime1 = (value) => {
  console.log(value);
}
      //表格


</script>
  
  
<style scoped>
.CountMange{
  height: 100%;
  width: 100%;
}
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 700;

}

.my-label {
  font-size: 24px;
  font-weight: bold;
}

.count_manage_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.count_manage_content>span {
  margin: 18px 90px;
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}

.demo-datetime-picker .block {
  padding: 30px 60px;
  text-align: center;
}

.line {
  width: 1px;
  background-color: var(--el-border-color);
}

.el-range-editor.el-input__wrapper {
  margin: 12px;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

tr,
td {
  border-collapse: collapse;
  height: 45px;
  border: 1px solid #ccc;
}
</style>